<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>写博客</title>

    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
    <link th:href="@{/editormd/css/editormd.css}" rel="stylesheet"/>


    <script th:src="@{/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/editormd/editormd.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>

    <script type="text/javascript" th:inline="javascript">
        //    调用编辑器
        var testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "1000px",
                height  : 640,
                syncScrolling : "single",
                path    : [[@{/editormd/lib/}]]
            });
        });
    </script>

    <script th:inline="javascript">
        function selectCategory(obj) {
            var name = $(obj).attr("name");
            var displayName = $(obj).attr("abbr");
            console.log(name + "   " + displayName);
            $("#categoryBtn").html(displayName);
            $("#cateoryInput").val(name);
        }
    </script>

</head>
<body>
<form method="post" th:action="@{/admin/save}" th:object="${article}">
    <div class="container">
        <br/>
        <br/>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">

                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false" id="categoryBtn">分类</button>
                        <ul class="dropdown-menu">
                            <li th:each="category:${categories}">
                                <a th:name="${category.name}" th:abbr="${category.displayName}" onclick="selectCategory(this)" th:text="${category.displayName}"></a>
                            </li>
                        </ul>
                    </div>
                    <input name="category" id="cateoryInput" type="hidden" th:field="*{category.name}"/>
                    <input name="id" type="hidden" th:value="${target.id}"/>
                    <input th:type="text" class="form-contorl" name="title" th:field="*{title}" th:placeholder="${target.title}"/>
                </div>
            </div>
        </div>
    </div>
    <br/>
    <!--文本标记区-->
    <div id="layout" style="width: 100%;height: 100%">
        <div id="test-editormd">
            <textarea style="display:none;" name="content" th:field="*{content}" th:text="${target.content}"></textarea>
        </div>
    </div>
    <!--提交按钮-->
    <div class="row">
        <div class="col-md-6 col-md-offset-6">
            <p>
                <input type="submit" class="btn btn-primary btn-lg" role="button" value="发表">
            </p>
        </div>
    </div>

</form>

</body>
</html>